<template>
       <div class="app1">
        <h4>父组件1</h4>
        <h4>资产：{{ money }}亿美元</h4>
        <h4>这是一辆：{{ car.brand }}</h4>
        <h4>价值：{{ car.price }}万人民币</h4>
        <Child1/>
       </div>
</template>
    
<script setup lang='ts'>
import { provide, reactive, ref } from 'vue';
import Child1 from './Child1.vue';

let money = ref(1)

let car = reactive({
    brand: '宝马',
    price:100
})

function updateMoney(value:number) {
    money.value += value
}
// 向后代提供数据
// provide('money', { money:money.value ,updateMoney})//.value这表示普通属性
provide('money', { money,updateMoney})
provide('car',car)
</script>
    
<style scoped>
    .app1{
        width: 80%;
        padding: 20px;
        background-color: bisque;
        font-size: 17px;
        border-radius: 5px;
    }
</style>